<template>
	<div id='page1'>
		<!-- 标题 -->
		<div class='title'>
			<h1>朱朝阳的个人简介</h1>
			<div class='hr'></div>
			<p class='english'>Zhu Chaoyang's personal profile</p>
		</div>
		<!-- 正文 -->
		<div class="introduce">
			<!-- 左边部分 -->
			<div class='left'>
				<img src="../../assets/me/me.png" alt="加载中...">
			</div>
			<!-- 右边部分 -->
			<div class='right'>
				<table class='table_person'>
					<tr>
						<td>姓名：</td>
						<td></td>
						<td>朱朝阳</td>
					</tr>
					<tr>
						<td>籍贯：</td>
						<td></td>
						<td>江苏淮安</td>
					</tr>
					<tr>
						<td>政治面貌：</td>
						<td></td>
						<td>中共党员</td>
					</tr>
					<tr>
						<td>学历：</td>
						<td></td>
						<td>苏州科技大学（就读）</td>
					</tr>
					<tr>
						<td>参与项目：</td>
						<td></td>
						<td>
							<ol class='prize'>
								<li>个人站点建设</li>
								<li>程序员小站开发</li>
								<li>净衣坊项目商铺后台</li>
								<li>净衣坊微信小程序客户端</li>
							</ol>
						</td>
					</tr>
					<tr>
						<td>获得奖项：</td>
						<td></td>
						<td>
							<ol class='prize'>
								<li v-for='prize in personPrize'>{{ prize }}</li>
							</ol>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'page1',
		data() {
			return {
				personPrize: [
					'江苏省蓝桥杯三等奖',
					'两次获得国家级奖学金',
					'江苏省移动互联开发三等奖',
					'学院‘中兴杯’编程大赛一等奖',
					'学院‘睿智云杯’编程大赛一等奖',
					'腾讯微信小程序开发大赛华东赛区二等奖'
				]
			}
		}
	}

</script>
<style scoped="true">
	* {
		margin: 0px;
		padding: 0px;
	}

	#page1 {
		top: 100%;
		width: 71%;
		padding-top: 40px;
		margin-left: 27%;
		margin-top: 20px;
		position: absolute;
		padding-bottom: 80px;
		border-bottom: 1px solid #EEEEEE;
	}

	.introduce {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-top: 20px;
	}
	
	.introduce .left {
		margin: 0px 10% 0px 5%;
	}

	.hr {
		width: 100%;
		height: 2px;
		background-color: black;
	}

	.english {
		color: #343434;
		text-align: right;
		font-size: 15px;
		line-height: 26px;
		font-family: 'Open Sans', sans-serif;
	}
	
	.table_person {
		font-family: '微软雅黑';
		height: 335px;
	}
	
	.prize {
		list-style: inside;
		list-style-type: square;
	}

</style>
